<v-app>
  <v-speed-dial v-show="!list" v-model="menu" fixed top right direction="bottom" style="user-select: none;">
    <template v-slot:activator>
      <v-btn
        @click.native.stop.prevent="menu=!menu"
        @touchstart.native.stop.prevent="menu=!menu"
        fab
        color="primary"
        :style="{width:size+'px', height:size+'px'}"
      >
        <v-icon v-if="menu" :size="size * 0.6">close</v-icon>
        <v-icon v-else :size="size * 0.6">menu</v-icon>
      </v-btn>
    </template>
    <v-btn
      fab
      :style="{width:size*0.9+'px', height:size*0.9+'px'}"
      @click.native.stop.prevent="list=!list;menu=false;init();"
      @touchstart.native.stop.prevent="list=!list;menu=false;init();"
    >
      <v-icon :size="size * 0.55" color="primary">assignment</v-icon>
    </v-btn>
    <v-btn
      fab
      :style="{width:size*0.9+'px', height:size*0.9+'px'}"
      @click.native.stop.prevent="window.location.href = window.location.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + '/'"
      @touchstart.native.stop.prevent="window.location.href = window.location.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + '/'"
    >
      <v-icon :size="size * 0.55" color="primary">games</v-icon>
    </v-btn>
    <v-btn
      fab
      :style="{width:size*0.9+'px', height:size*0.9+'px'}"
      @click.native.stop.prevent="tune=true;menu=false;"
      @touchstart.native.stop.prevent="tune=true;menu=false;"
    >
      <v-icon :size="size * 0.55" color="primary">tune</v-icon>
    </v-btn>
    <v-btn
      fab
      :color="cuber.mirror?'primary':''"
      :style="{width:size*0.9+'px', height:size*0.9+'px'}"
      @click.native.stop.prevent="cuber.mirror=!cuber.mirror;"
      @touchstart.native.stop.prevent="cuber.mirror=!cuber.mirror;"
    >
      <v-icon :size="size * 0.55" :color="cuber.mirror?'':'primary'">flip</v-icon>
    </v-btn>
    <v-btn
      fab
      :style="{width:size*0.9+'px', height:size*0.9+'px'}"
      @click.native.stop.prevent="window.location = 'https://gitee.com/huazhechen/cuber'"
      @touchstart.native.stop.prevent="window.location = 'https://gitee.com/huazhechen/cuber'"
    >
      <v-icon :size="size * 0.55" color="primary">code</v-icon>
    </v-btn>
  </v-speed-dial>
  <div v-show="!list" v-resize="resize" style="padding:0%;user-select: none;touch-action: none;">
    <div ref="cuber"></div>
    <div style="margin:0%;padding:0%;background-color:#FFFFFF;" :style="{width:width + 'px', height:'210px'}">
      <v-container
        fluid
        grid-list-md
        text-xs-center
        :style="{width:Math.min(width, height * 0.6) + 'px', 'margin-left': (width-Math.min(width, height * 0.6))/2 + 'px'}"
      >
        <v-layout row wrap>
          <v-flex xs12 style="display: flex">
            <template v-for="(group, i) in algs">
              <v-btn
                class="title"
                :color="index.group == i?'primary':''"
                depressed
                style="text-transform:none; min-width: 0%; min-height: 0%; margin: 0%; padding: 0%; height: 2em; flex: 1"
                @click.native.stop.prevent="tabs(i);"
                @touchstart.native.stop.prevent="tabs(i);"
              >
                {{index.group==i?(progress != 0?'':name):group.name}}
                <v-icon large v-show="index.group == i && (progress != 0)">replay</v-icon>
              </v-btn>
            </template>
          </v-flex>
          <v-flex xs12>
            <v-text-field
              style="text-transform:none;padding-left: 2%;padding-right: 2%;"
              dense
              class="title"
              single-line
              hide-details
              outlined
              :disabled="playing"
              :append-icon="exp==origin?'':'settings_backup_restore'"
              @click:append="exp=origin"
              v-model="exp"
            >
            </v-text-field>
          </v-flex>
          <v-flex xs12 style="padding-left: 5%; padding-right: 5%">
            <v-slider
              style="margin: 0%"
              readonly
              hide-details
              :thumb-label="progress!=0?'always':false"
              ticks="always"
              v-model="progress"
              :max="actions.length"
            >
              <template v-slot:thumb-label>{{progress==0?'#':actions[progress - 1].value}}</template>
            </v-slider>
          </v-flex>
          <v-flex xs12 style="display: flex">
            <v-flex>
              <v-btn
                block
                text
                large
                @click.native.stop.prevent="index={group:index.group, index:(index.index + algs[index.group].algs.length - 1)%algs[index.group].algs.length};"
                @touchstart.native.stop.prevent="index={group:index.group, index:(index.index + algs[index.group].algs.length - 1)%algs[index.group].algs.length};"
                style="margin: 0%; padding: 0%;"
              >
                <v-icon large>skip_previous</v-icon>
              </v-btn>
            </v-flex>
            <v-flex>
              <v-btn
                block
                text
                large
                :disabled="progress==0"
                @click.native.stop.prevent="backward"
                @touchstart.native.stop.prevent="backward"
                style="margin: 0%; padding: 0%;"
              >
                <v-icon large>fast_rewind</v-icon>
              </v-btn>
            </v-flex>
            <v-flex>
              <v-btn
                block
                text
                large
                :disabled="progress == actions.length"
                @click.native.stop.prevent="toggle"
                @touchstart.native.stop.prevent="toggle"
                style="margin: 0%; padding: 0%;"
              >
                <v-icon large>{{playing?'pause':'play_arrow'}}</v-icon>
              </v-btn>
            </v-flex>
            <v-flex>
              <v-btn
                block
                text
                large
                :disabled="progress == actions.length"
                @click.native.stop.prevent="forward"
                @touchstart.native.stop.prevent="forward"
                style="margin: 0%; padding: 0%;"
              >
                <v-icon large>fast_forward</v-icon>
              </v-btn>
            </v-flex>
            <v-flex>
              <v-btn
                block
                text
                large
                @click.native.stop.prevent="index={group:index.group, index:(index.index + 1)%algs[index.group].algs.length};"
                @touchstart.native.stop.prevent="index={group:index.group, index:(index.index + 1)%algs[index.group].algs.length};"
                style="margin: 0%; padding: 0%;"
              >
                <v-icon large>skip_next</v-icon>
              </v-btn>
            </v-flex>
          </v-flex>
        </v-layout>
      </v-container>
    </div>
  </div>
  <tune v-model="tune"></tune>
  <div v-show="list" style="margin:0;display: flex;flex-flow: column;height: 100%;">
    <div>
      <v-tabs v-model="tab" grow color="cyan">
        <v-tab v-for="(group,i) in algs" :key="i" :href="`#tab-${i}`">
          {{ group.name}}
        </v-tab>
      </v-tabs>
    </div>
    <div style="flex: 1;overflow: auto;">
      <v-tabs-items v-model="tab">
        <v-tab-item v-for="(group,i) in pics" :key="i" :value="'tab-' + i" style="height: 100%;">
          <v-layout row wrap style="margin: 0%; padding:0%; min-width: 0%; min-height: 0%;align-items: stretch;">
            <v-flex d-flex style="padding:0%; min-width: 0%; min-height: 0%;" v-for="(pic, j) in group">
              <v-card outlined :style="{width:Math.min(width, height) / 4+'px'}" style="height: 100%;">
                <p class="title" style="text-align:center;margin: 0%;padding: 0%;color: indianred">{{algs[i].algs[j].name}}</p>
                <img :src="pic" style="width: 100%;" @click="index={group:i, index:j};list=false;" />
                <p style="text-align:center;word-wrap:break-word;margin: 0%;padding: 0%;">{{algs[i].algs[j].exp}}</p>
              </v-card>
            </v-flex>
          </v-layout>
        </v-tab-item>
      </v-tabs-items>
    </div>
  </div>
</v-app>
